<template>
    <div>
        <p class="duration-200 text-center" v-if="cityList.length === 0">
            暂时没有保存过城市天气信息，请查询后点击右上角"+"号保存。
        </p>
        <div>
            
            <template v-if="state && cityList.length > 0">
                <div v-for="(item, index) in cityList" :key="index" class="Info-Item01">
                    <div class="Info-Item02">
                        <h3>{{ item.cityName }}</h3>
                        <p>{{ item.cityWeather }}</p>
                    </div>
                    <div class="Info-Item03">
                        <button class="look" @click="lookHandler(index)">查看</button>
                        <button class="delete" @click="deleteHandler(index)">删除</button>
                    </div>
                </div>
            </template>
        </div>
        <h4 class="text-box" v-if="state">近期天气</h4>
        <div class="container" >
            
            <div class="row1">
                <template v-for="(item, index) in WeatherInfoList" :key="index">
                    <div class="info-item">
                        <span v-if="index < 2">{{ index === 0 ? '今天' : '明天' }}</span>
                        <span v-else>{{ weekList[item.week-1] }}</span>
                        <span>{{ item.date.slice(5) }}</span>
                        <span>{{ item.dayweather }}</span>
                        <span>{{ `风力${item.daypower}级` }}</span>
                    </div>
                </template>
            </div>
            <div class="row2" ref="chartContainer">
                <v-chart :option="option" :autoresize="true" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { storeToRefs } from "pinia"
import { useWeatherStore } from "../stores/Weather"
import { ref, onMounted, watch, onUnmounted, nextTick } from "vue"
import * as echarts from "echarts"

const { lookHandler, deleteHandler } = useWeatherStore()
const { cityList, WeatherInfoList, state, weekList } = storeToRefs(useWeatherStore())

const chartContainer = ref(null)

const option = ref({
    tooltip: {
        trigger: "axis",
    },
    grid: {
        left: "10%",
        right: "10%",
        bottom: "5%",
        containLabel: true,
        borderWidth: 10,
    },
    xAxis: {
        type: "category",
        data: [],
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false,
        },
        splitLine: {
            show: false,
        },
    },
    yAxis: {
        type: "value",
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false,
        },
        splitLine: {
            show: false,
        },
    },
    series: [
        {
            data: [],
            name: "白天温度",
            type: "line",
            smooth: true,
            label: {
                show: true,
                formatter: "白{c}°C",
            },
        },
        {
            data: [],
            name: "夜晚温度",
            type: "line",
            smooth: true,
            label: {
                show: true,
                formatter: "晚{c}°C",
            },
        },
    ],
})
let chartInstance = null

onMounted(() => {
    if (chartContainer.value) {
        console.log(chartContainer.value, "chartContainer")
        chartInstance = echarts.init(chartContainer.value)
        updateChart()
    }
})
onUnmounted(() => {
    if (chartInstance) {
        chartInstance.dispose()
        chartInstance = null
    }
})

watch(WeatherInfoList, (newVal) => {
    if (newVal.length) {
        nextTick(() => {
            updateChart()
        })
    }
})

function updateChart() {
    option.value.xAxis.data = WeatherInfoList.value.map((info) => info.date)
    option.value.series[0].data = WeatherInfoList.value.map(
        (info) => info.daytemp
    )
    option.value.series[1].data = WeatherInfoList.value.map(
        (info) => info.nighttemp
    )

    if (chartInstance) {
        chartInstance.setOption(option.value)
    }
}
</script>

<style lang="scss" scoped>
.duration-200 {
    transition-duration: 0.2s;
}

.text-center {
    text-align: center;
    color: white;
}

.text-box{
    margin-left: 8%;
    color: white;
}

.container {
    height: 400px;
    width: 82%;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left:8% ;
    bottom: 10px;
    background-color: rgb(0, 78, 113);
    color: white;
}

.row1 {
    display: flex;
    position: absolute;
    top:50px;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.row2 {
    width: 80vw;
    position: absolute;
    top:200px;
    height: 250px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
    width: 15vw;
    letter-spacing:2px;
}

.Info-Item01 {
    display: flex;
    position: relative;
    left: 8%;
    margin: 0 auto;
    width: 100%;

    .look,
    .delete {
        position: absolute;
        background-color: rgb(234, 179, 8);
        color: white;
        border: none;
        border-radius: 5px;
        padding: 5px 10px 5px 10px;
        width: 80px;
        height: 40px;
        margin-right: 20px;
        right: 20%;
        top: 15%;
    }

    .delete {
        right: 25%;
        top: 15%;
    }
}

.Info-Item02 {
    display: flex;
    align-content: center;
    justify-content: space-between;
    width: 80%;
    padding: 2px 20px 2px 20px;
    background-color: rgb(0, 78, 113);
    margin-bottom: 20px;
    transition: width 0.2s;
    color: white;
}

.Info-Item03 {
    display: none;
    right: 15%;
    padding: 10px;
}

.Info-Item01:hover .Info-Item03 {
    display: flex;
    justify-content: space-between;
}

.Info-Item01:hover .Info-Item02 {
    width: 60%;
}
</style>
